<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块选择器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .module-card {
            transition: all 0.2s ease;
        }
        .module-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .module-card.selected {
            border-color: #8b5cf6;
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-store-decoration.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">添加模块</h1>
                <button onclick="batchAdd()" class="text-white hover:opacity-80">
                    <i class="fas fa-plus-circle text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Selected Counter -->
        <div class="bg-purple-50 border-b border-purple-200 px-4 py-3">
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-700">已选择 <span id="selectedCount" class="font-bold text-purple-600">0</span> 个模块</span>
                <button onclick="clearSelection()" class="text-xs text-purple-600 hover:text-purple-700">清空选择</button>
            </div>
        </div>

        <!-- Module Categories -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <!-- Display Modules -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    展示模块
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="image-carousel" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-images text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">图片轮播</p>
                        <p class="text-xs text-gray-500">展示多张产品图片</p>
                        <div class="mt-2">
                            <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="product-showcase" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-th-large text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">商品橱窗</p>
                        <p class="text-xs text-gray-500">精选商品展示区</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="brand-story" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-heart text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">品牌故事</p>
                        <p class="text-xs text-gray-500">展示品牌文化理念</p>
                        <div class="mt-2">
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded-full">¥29</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="video-player" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-play-circle text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">视频播放</p>
                        <p class="text-xs text-gray-500">产品演示视频</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Marketing Modules -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    营销模块
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="coupon-center" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-ticket-alt text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">优惠券中心</p>
                        <p class="text-xs text-gray-500">展示店铺优惠券</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="flash-sale" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-red-500 to-pink-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-bolt text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">限时抢购</p>
                        <p class="text-xs text-gray-500">倒计时促销活动</p>
                        <div class="mt-2">
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded-full">¥39</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="group-buying" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-users text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">团购活动</p>
                        <p class="text-xs text-gray-500">多人拼团优惠</p>
                        <div class="mt-2">
                            <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full">VIP专享</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="points-mall" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-gift text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">积分商城</p>
                        <p class="text-xs text-gray-500">积分兑换商品</p>
                        <div class="mt-2">
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded-full">¥59</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Interaction Modules -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    互动模块
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="customer-reviews" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-comment-dots text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">客户评价</p>
                        <p class="text-xs text-gray-500">展示用户好评</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="live-chat" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-green-500 to-teal-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-comments text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">在线客服</p>
                        <p class="text-xs text-gray-500">实时聊天咨询</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="social-share" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-purple-500 to-indigo-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-share-alt text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">社交分享</p>
                        <p class="text-xs text-gray-500">分享到社交平台</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="qr-code" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-gray-500 to-gray-600 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-qrcode text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">二维码</p>
                        <p class="text-xs text-gray-500">店铺专属二维码</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Information Modules -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    信息模块
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="store-info" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-info-circle text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">店铺信息</p>
                        <p class="text-xs text-gray-500">联系方式和介绍</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="announcement" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-bullhorn text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">店铺公告</p>
                        <p class="text-xs text-gray-500">重要通知和活动</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="faq" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-teal-500 to-cyan-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-question-circle text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">常见问题</p>
                        <p class="text-xs text-gray-500">FAQ和帮助信息</p>
                        <div class="mt-2">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">免费</span>
                        </div>
                    </div>
                    
                    <div class="module-card bg-white rounded-lg border-2 border-gray-200 p-4 cursor-pointer text-center" 
                         data-module="contact-form" onclick="toggleModule(this)">
                        <div class="w-12 h-12 mx-auto bg-gradient-to-br from-pink-500 to-purple-500 rounded-xl flex items-center justify-center text-white mb-2">
                            <i class="fas fa-envelope text-xl"></i>
                        </div>
                        <p class="text-sm font-medium mb-1">联系表单</p>
                        <p class="text-xs text-gray-500">客户留言表单</p>
                        <div class="mt-2">
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded-full">¥19</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fixed Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex space-x-3">
                <button onclick="addSelectedModules()" class="flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200">
                    <i class="fas fa-plus mr-2"></i>添加选中模块
                </button>
                <button onclick="previewModules()" class="bg-gray-100 text-gray-700 font-medium px-6 py-3 rounded-xl hover:bg-gray-200 transition-colors">
                    <i class="fas fa-eye"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Module selection management
        let selectedModules = new Set();

        function toggleModule(element) {
            const moduleId = element.dataset.module;
            const priceElement = element.querySelector('.text-xs.bg-orange-100, .text-xs.bg-purple-100');
            
            // Check if it's a paid module
            if (priceElement) {
                const priceText = priceElement.textContent;
                if (priceText.includes('VIP专享')) {
                    if (!confirm('该模块需要VIP会员权限。\n\n是否立即开通VIP会员？')) {
                        return;
                    }
                    showToast('正在跳转到VIP开通页面...');
                    setTimeout(() => {
                        showToast('功能开发中，敬请期待');
                    }, 1500);
                    return;
                } else if (priceText.includes('¥')) {
                    if (!confirm(`该模块需要付费使用 ${priceText}。\n\n确认购买此模块吗？`)) {
                        return;
                    }
                    showToast('正在处理支付...');
                    setTimeout(() => {
                        showToast('支付成功，模块已解锁');
                        selectModule(element, moduleId);
                    }, 2000);
                    return;
                }
            }
            
            selectModule(element, moduleId);
        }

        function selectModule(element, moduleId) {
            if (selectedModules.has(moduleId)) {
                // Deselect
                selectedModules.delete(moduleId);
                element.classList.remove('selected');
                element.style.borderColor = '#e5e7eb';
                element.style.background = 'white';
            } else {
                // Select
                selectedModules.add(moduleId);
                element.classList.add('selected');
                element.style.borderColor = '#8b5cf6';
                element.style.background = 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)';
            }
            
            updateSelectedCount();
        }

        function updateSelectedCount() {
            document.getElementById('selectedCount').textContent = selectedModules.size;
        }

        function clearSelection() {
            if (selectedModules.size === 0) {
                showToast('没有已选择的模块');
                return;
            }
            
            if (confirm(`确认清空所有 ${selectedModules.size} 个已选择的模块？`)) {
                selectedModules.clear();
                document.querySelectorAll('.module-card.selected').forEach(element => {
                    element.classList.remove('selected');
                    element.style.borderColor = '#e5e7eb';
                    element.style.background = 'white';
                });
                updateSelectedCount();
                showToast('已清空选择');
            }
        }

        function addSelectedModules() {
            if (selectedModules.size === 0) {
                showToast('请先选择要添加的模块');
                return;
            }
            
            const moduleNames = Array.from(selectedModules).map(id => {
                const element = document.querySelector(`[data-module="${id}"]`);
                return element.querySelector('.text-sm.font-medium').textContent;
            });
            
            if (confirm(`确认添加以下 ${selectedModules.size} 个模块到店铺？\n\n${moduleNames.join('\n')}`)) {
                showToast(`正在添加 ${selectedModules.size} 个模块...`);
                
                setTimeout(() => {
                    showToast('模块添加成功！');
                    setTimeout(() => {
                        window.location.href = 'b2b-store-decoration.html';
                    }, 1000);
                }, 2000);
            }
        }

        function batchAdd() {
            showToast('批量添加功能开发中，敬请期待');
        }

        function previewModules() {
            if (selectedModules.size === 0) {
                showToast('请先选择要预览的模块');
                return;
            }
            showToast('正在生成预览...');
            setTimeout(() => {
                showToast('预览功能开发中，敬请期待');
            }, 1000);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('模块选择器已加载');
            updateSelectedCount();
        });
    </script>
</body>
</html>